<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="add">设置</button>
    <button class="get">获取</button>
    <button class="edit">修改</button>
    <button class="del">删除</button>
</body>
<script type="module">
    import {setCookie,getCookie} from "../js/cookie.js";
    // cookie的创建
    // 1. cookie的存取 都依赖于document.cookie 
    // 2. 以键值对的形式存在 (key=value)
    // 3. 存的时候一条一条存储的,取的时候,将所有的cookie整合到一个字符串中用"; "分隔

    // cookie的时效性 => cookie可以设置过期时间
    // 默认情况下 cookie在浏览器关闭时过期,如果想自定义过期时间,需要给cookie添加expires修饰,expires接收一个字符串类型的时间(世界时)

    // date.toString()   日期对象转字符串(北京时间)
    // date.toUTCString() 日期对象转字符串(格林威治时间 => 世界时)


    // cookie之跨页面访问 => cookie可以设置存储路径
    // cookie默认存储在文件所在的目录, 该目录及其子目录下所有的文件均可以访问cookie, 如果自己的cookie存储路径,需要借助path属性修饰;  path要接收一个自 站点根目录 起的路径(/day31),且路径中不能使用中文

    // cookie的修改 => 可以对应键名修改键值,过期时间,存储路径
 
    // cookie的删除
    // 默认情况下, 如果没有设置过期时间,cookie在浏览器关闭就删除, 设置了过期时间,等到期之后,cookie就失效了,无法访问,并在刷新页面或关闭浏览器时删除
    // 所谓删除cookie 就是将cookie的过期时间 设置为已经过去的事件  => cookie就失效了,无法访问,并在刷新页面或关闭浏览器时删除


    var addBtn = document.getElementsByClassName("add")[0];
    var getBtn = document.getElementsByClassName("get")[0];
    var editBtn = document.getElementsByClassName("edit")[0];
    var delBtn = document.getElementsByClassName("del")[0];


    // 设置存储路径
    addBtn.onclick = function () {
        setCookie("user","a123123",365*24*60*60);
        setCookie("pwd","123123");
        setCookie("phone","17386141517",7*24*60*60);
        setCookie("email","123123@qq.com",7*24*60*60);
    }

    // cookie的存储都依赖于document.cookie
    // 将所有的cookie整合到一个字符串中用"; "分隔
    getBtn.onclick = function () {
        console.log(document.cookie);

        console.log(getCookie("user"));
        console.log(getCookie("pwd"));
        console.log(getCookie("phone"));
        console.log(getCookie("email"));
        console.log(getCookie("age"));
    }

    editBtn.onclick = function () {
        setCookie("user","b123123",7*24*60*60);
        setCookie("pwd","3213231");
        setCookie("phone","17386146666",2*24*60*60);
        setCookie("email","321321@qq.com",2*24*60*60);
    }

    delBtn.onclick = function(){
        // console.log(111111);
        // document.cookie = ""; /// 新增cookie => 没有键名,也没有键值 => 不做任何操作

        setCookie("user","",-1);
        setCookie("pwd","",-1);
        setCookie("phone","",-1);
        setCookie("email","",-1);

        // 删除完毕之后统一刷新
        location.reload();

    }

    



</script>

</html>